<template>
    <div class="root_div"
    >
        <input @change="triggerInput" type="file" id="fileInput" multiple accept=".pdf,.docx,.doc,.xlsx,.xlx,.ppt,.pptx" style="display: none;"/>
        <div class="choose_box" id="customUpload" @click="clickFile">
            <div class="add-txt">+</div>
            <div class="txt">选择文件</div>
        </div>
    </div>
</template>

<script>
import { useRoute } from 'vue-router';
import { ElLoading, ElMessage } from 'element-plus';
import wx from "weixin-js-sdk"
export default{
    data(){
        return {
            finish:0,
            totalLength:0,
            loading:null,
            token:null,
            merchantId:null
        }
    },
    computed:{
        loadingtext(){
            console.log("计算",this.finish+"/"+this.totalLength)
            return this.finish+"/"+this.totalLength
        }
    },
    created(){
        const route=useRoute()
        this.token=route.query.token
        this.merchantId=route.query.merchantId
    },
    methods:{
        clickFile(){
            document.getElementById("fileInput").click()
        },
        triggerInput(event){
            const that=this
            const files=event.target.files
            if(files.length!==0){
				that.totalLength=files.length
                that.loading=ElLoading.service({fullscreen:true})
                that.loading.setText(`${that.finish}/${that.totalLength}`)
                for(let i=0;i<files.length;i++){
                    that.uploadFile(files[i],i+1)
                }
            }
        },
        addFile(fileurl,filename,direction,page){
            const that=this
            var data=JSON.stringify({
                // "token": that.token,
                "fileSrc": fileurl,
                "fileSuffix": filename.split(".").at(-1),
                "merchantId": that.merchantId,
                "orderType": 1,
                "paperSize": 14,
                "paperType": 1,
                "printAllPage": true,
                "printColor": 0,
                "printMethod": 1,
                "shrinkMergeMode": 11,
                "specName":filename,
                "specNum": 1,
                "specType": 1,
                "direction":direction,
                "fileTotalPage":page,
                "printPages":[...Array.from({length:page},(_,index)=>index+1)]
            })
            const xhr=new XMLHttpRequest()
            xhr.open("POST", "https://api.xyy.pub/api/front/spec/cart/add")
            xhr.setRequestHeader("authori-zation", that.token)
            xhr.setRequestHeader("Content-Type", "application/json")
            xhr.onload=function(res){
                const result=JSON.parse(res.currentTarget.responseText)
                if(result.code==200){
                    that.finish=that.finish+1
                    console.log("finish",that.finish)
                    that.loading.setText(`${that.finish}/${that.totalLength}`)
                    if(that.finish===that.totalLength){
                        that.loading.close()
                        that.finish=0
                        that.totalLength=0
                    	wx.miniProgram.postMessage({
                            data:{
                                isfinish:true
                            }
                        })
                        wx.miniProgram.redirectTo({
					        url:"/pages/printingType/wordAndPicture/wordAndPicture"
                        })
                    }
                }
                console.log(result,result)
            }
            xhr.send(data)
        },
        uploadFile(file,i){
            const that=this
            const formData=new FormData()
            formData.append("multipart",file,file.name)
            const xhr=new XMLHttpRequest()
            xhr.open("POST","https://file.xyy.pub/api/file/upload/file?model&pid",true)
            xhr.setRequestHeader("authori-zation", that.token)
            xhr.setRequestHeader('Access-Control-Allow-Origin', '*')
            xhr.onload=function(){
                const result=JSON.parse(xhr.responseText)
                if(result.code===200){
                    const data=JSON.parse(xhr.responseText)
                    that.addFile(data.data.url,data.data.fileName,data.data.direction,data.data.page)
                }else{
                    that.errorMessage()
                    console.log("上传文件失败",result)
                }
            }
            xhr.onerror=function(){
                that.errorMessage()
                console.log("上传文件失败")
            }
            xhr.send(formData)
        },
        errorMessage(){
            ElMessage.error("上传文件失败，请重试！")
            this.finish=0
            this.totalLength=0
            this.loading=null
        }
    }
}
</script>

<style>
    .root_div{
        height: 100vh;
        background-color: #efefef;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .choose_box{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 80px;
        background-color: #0097e3;
        border-radius: 50%;
        height: 80px;
        color: #fff;
        box-sizing: content-box;
        padding: 20px;
    }
    .choose_box .add-txt{
        font-size: 40px;
        font-weight: bold;
        color: #fff;
    }
    .choose_box .txt{
        font-size: 20px;
    }
</style>